<template>
  <div>
    子组件修改父组件传来的值
    <input :type="type1"
           v-model="valueson"
           @input="$emit('sonMethod', valueson)">
    {{valueson}}
  </div>
</template>

<script>
export default {
  // props属性是用来定义子组件的属性的，Vue组件就可以通过props属性来声明一些自己子组件特有的自定义属性(标签的属性)，在父页面中，就可以通过这个标签属性，往子组件中传入值。
  //用于定义子组件中data数据的名称
  //props表示属性：指的子组件所拥有的标签属性！
  props: ['type1', 'value1'],
  data() {
    return {
      //this.value1仅仅只是初始化子组件的时候赋初始值，无法在后续通过value1的改变来改变valueson
      //valueson最终 将会用来传递给父组件！
      valueson: this.value1, //this是vue的实例，完成后才有this.value1
    }
  },
  watch: {
    value1(newValue) {
      this.valueson = newValue
    },
  },
}
</script>

<style>
</style>